<template>
  <div>
    <el-form :inline="true" :model="formInline" class="form-style">
      <el-row style="border-bottom:1px solid #eee">
        <el-col>
          <el-form-item label="时间：" style="margin:15px 0 15px 30px">
        <el-date-picker v-model="formInline.startTime" type="date" placeholder="选择日期"></el-date-picker>
        <el-date-picker v-model="formInline.endTime" type="date" placeholder="选择日期"></el-date-picker>
        <el-button icon="el-icon-search" style="margin-left:30px" type="primary" @click="search">查询</el-button>
      </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="margin:15px 0 15px 30px">
        <el-button 
          icon="el-icon-document"
          size="medium"
          type="success">导出对账报表</el-button>
      </el-form-item>
    </el-form>
    <div class="table-style">
    <el-table :data="tableData">
      <el-table-column label="总金额" width="320" >
        <template slot-scope="scope">
          <p style="font-size:14px">{{scope.row.AllCostPriceStr}}</p>
          <span style="font-size:12px">{{scope.row.SupplierName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="OrderNumber" label="订单编号" width="140"></el-table-column>
      <el-table-column prop="ReceivingName" label="收货人" width="100"></el-table-column>
      <el-table-column label="商品" width="250">
        <template slot-scope="scope">
          <div class="goods">
            <div class="left">
              <el-image alt style="width:60px;height:60px">--</el-image>
            </div>
            <div class="right">
              <div class="tit">{{scope.row.ProductName}}</div>
              <div class="mon" style="color:red">￥{{scope.row.CostPrice}}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="Number" label="商品数量"></el-table-column>
      <el-table-column label="团长提成">--</el-table-column>
      <el-table-column prop="AllCost" label="总采购价"></el-table-column>
    </el-table>
    <botpage
      class="botpage-style"
      :currentPage="currentPage"
      :PageSize="PageSize"
      :total="total"
      @handleCurrentChange="currentChange"
      @handleSizeChange="pageSizeChange"
    />
    </div>
  </div>
</template>

<script>
import Botpage from "@/components/botpage/Botpage";
import { SUOrderFinanceToExcellApi, SUOrderFinanceByTime } from "@/request/api";
export default {
  data() {
    return {
      total: 1,
      PageSize: 10,
      currentPage: 1,
      tableData: [],
      formInline: {},
    };
  },
  methods: {
    getTableDatas() {
      SUOrderFinanceToExcellApi({
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        ScreenValues: "0",
        OtherValues: "SU",
      })
        .then((res) => {
          this.tableData = res.Data;
          this.currentPage = res.PageIndexs;
          this.PageSize = res.PageCount;
          this.total = res.DataCounts;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getTimeSearch(){
      SUOrderFinanceByTime({
        SupplierId : "1",
        StartTime : this.formInline.startTime,
        EndTime : this.formInline.endTime,
        OtherValues : "SU"
      }).then(res => {
        this.tableData = res.Data
      })
    },
    search() {
      this.getTimeSearch();
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableDatas();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableDatas();
    },
  },
  mounted() {
    this.getTableDatas();
    // this.getTimeSearch()
  },
  components: {
    Botpage,
  },
};
</script>

<style lang="less" scoped>
.goods {
  display: flex;
  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    margin-left: 10px;
    .tit {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>